<template>
  <div class="container">
    <div v-if="!showTimeOut && showCont">
      <div class="gzhTip" v-if="!isGz">
        <div>你还未关注《本地鸟生活服务》公众号</div>
        <div class="gzBtn" @click="showGzMask = true">关注</div>
      </div>
      <div class="gzMask" v-if="showGzMask">
        <div class="gzImgCont">
          <div class="erweima">
            <img src="static/img/erweima.jpg" />
          </div>
          <div class="erweimaText">长按识别二维码关注</div>
          <div class="closeaErweima" @click="closeErweimaFn">关闭此弹窗</div>
        </div>
      </div>
      <div class="homeBanner">
        <swiper
          style="max-height:21rem"
          :aspect-ratio="383 / 900"
          :auto="true"
          dots-position="center"
        >
          <swiper-item
            class="swiper-demo-img"
            v-for="(item, index) in homeData.banner"
            :key="index"
          >
            <img :src="item.image + ossSrc" @click="bannerFn(item)" />
          </swiper-item>
        </swiper>
      </div>
      <van-notice-bar
        class="notice"
        left-icon="volume-o"
        color="#4fc763"
        background="#fff"
        text="疲惫？需要放松？来！同城上门按摩，专业服务，舒缓身心压力。预约即享特惠，尽情享受宾至如归的体验！预约今日，焕发活力！"
      />
      <div class="tagTip">
        <div class="tagTipItem">
          <span class="iconfont icon-a-zu195"></span>
          <span>爽约包赔</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-kefu2"></span>
          <span>在线客服</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-youzhichangshang"></span>
          <span>质量保障</span>
        </div>
        <div class="tagTipItem">
          <span class="iconfont icon-yihangyige"></span>
          <span>隐私保护</span>
        </div>
      </div>
      <div class="listCont">
        <!-- <div class="listName">家庭保洁</div> -->
        <div
          :class="
            index == goodsList.length - 1 ? 'no_border listItem' : 'listItem'
          "
          @click="goDetail(item)"
          :key="index"
          v-for="(item, index) in goodsList"
        >
          <div class="itemImg">
            <img :src="item.package_cover + ossSrc" />
            <div class="typeTagWai">
              <div class="typeTag">热销</div>
            </div>
          </div>
          <div class="itemInfo">
            <div class="itemName">
              <span>{{ item.package_name }}</span>
            </div>
            <div class="itemDes">
              {{ item.package_effect }}
            </div>
            <div class="priceVal">
              <span class="price"
                >限时：￥<span style="font-size:0.9rem">{{
                  item.package_price
                }}</span></span
              >
              <span class="oldPrice">¥{{ item.package_original_price }}</span>
            </div>
            <div class="itemTag">
              <div class="tagDes">
                <span class="iconfont icon-shijian"></span>
                <span>{{ item.package_time }}分钟</span>
              </div>
              <div class="saleCont">
                <span class="showNum">热销:{{ item.package_sale }}单</span>
                <span class="showNum">好评:{{ item.package_score }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footcpm></footcpm>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from "@/components/footcpm";
import { technicianuser, is_gz } from "@/http/api";
import { Swiper, SwiperItem } from "vux";
import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
export default {
  components: { getLoad, getTimeOut, footcpm, Swiper, SwiperItem },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showGzMask: false,
      isGz: true,
      homeData: {},
      goodsList: []
    };
  },
  props: {},
  methods: {
    getEndTime() {
      $.ajax({
        url: "https://gx.localbird.cn/Index/Check_project",
        data: {
          project_number: "XM38308"
        },
        type: "post",
        success: res => {
          console.log(res);
          if (res.data < 1) {
            alert("访问失败，请联系管理员");
          } else {
            this.getData();
          }
        }
      });
    },
    bannerFn(item) {
      if (item.url != "") {
        this.$router.push({ path: item.url });
      }
    },
    goDetail(item) {
      this.$router.push({ path: "/detail", query: { id: item.package_id } });
    },
    closeErweimaFn() {
      this.showGzMask = false;
    },
    getData() {
      let data = {
        site_city: localStorage.getItem("site_city")
      };
      technicianuser(data)
        .then(res => {
          if (res.data.code == 1) {
            this.homeData = res.data.data;
            this.goodsList = res.data.data.package.reverse();
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    },
    getIsGz() {
      is_gz().then(res => {
        if (res.data.code == 1) {
          if (res.data.data == "已关注") {
            this.isGz = true;
          } else {
            this.isGz = false;
          }
        } else {
          this.showToast = true;
          this.showText = res.data.msg;
        }
      });
    }
  },
  mounted() {},
  created() {
    this.getEndTime();
    this.getIsGz();
  }
};
</script>

<style scoped lang="less">
.container {
  padding-bottom: 3.75rem;
  box-sizing: border-box;
  .gzhTip {
    width: 100%;
    background-color: rgba(0, 0, 0, 1);
    font-size: 0.6rem;
    padding: 0.5rem 4%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .gzBtn {
      padding: 0.25rem 1.25rem;
      background-color: #4fc763;
    }
  }
  .gzMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    .gzImgCont {
      width: 50%;
      text-align: center;
      img {
        width: 100%;
      }
      .erweimaText {
        margin-top: 0.25rem;
      }
      .closeaErweima {
        margin-top: 0.75rem;
        border: 1px solid #fff;
        padding: 0.25rem;
        border-radius: 2rem;
      }
    }
    .isNewImg {
      width: 80%;
      .closeaErweima {
        width: 60%;
        margin: 2rem auto 0;
      }
    }
    .bigMaskImg {
      width: 90%;
      .closeaErweima {
        width: 60%;
        margin: 1.5rem auto 0;
      }
    }
  }
  .homeBanner {
    width: 92%;
    font-size: 0;
    margin: 0 auto;
    margin-top: 0.75rem;
    img {
      width: 100%;
      border-radius: 0.5rem;
    }
  }
  .notice {
    margin-top: 0.75rem;
  }
  .tagTip {
    display: flex;
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    margin-top: 0.75rem;
    font-size: 0.6rem;
    justify-content: space-between;
    align-items: center;
    .tagTipItem {
      display: flex;
      align-items: center;
      color: #4fc763;
      .iconfont {
        margin-right: 0.25rem;
        font-size: 0.7rem;
      }
      .icon-a-zu195 {
        font-size: 0.75rem;
      }
      .icon-youzhichangshang {
        font-size: 0.8rem;
      }
      .icon-yihangyige {
        font-size: 0.9rem;
      }
    }
  }
  .listCont {
    width: 100%;
    padding: 0 4%;
    // background-color: #fff;
    box-sizing: border-box;
    margin-top: rem;
    .listName {
      font-weight: bold;
      font-size: 0.8rem;
      border-left: 0.2rem solid #4fc763;
      padding-left: 0.5rem;
      height: 1rem;
      line-height: 1rem;
    }
    .listItem {
      width: 100%;
      padding: 0.75rem 0;
      // padding: 0.75rem;
      // background-color: #fff;
      border-bottom: 1px solid #ebebeb;
      // margin-bottom: 0.75rem;
      // padding: 1rem 0;
      border-radius: 0.25rem;
      display: flex;
      box-sizing: border-box;
      .itemImg {
        width: 4.5rem;
        font-size: 0;
        overflow: hidden;
        border-radius: 0.25rem;
        margin-right: 0.75rem;
        position: relative;
        .typeTagWai {
          font-size: 0.6rem;
          height: 1.1rem;
          line-height: 1.3rem;
          position: absolute;
          top: -0.1rem;
          right: -2.1rem;
          background-color: #4fc763;
          width: 5rem;
          text-align: center;
          transform: rotate(45deg);
          color: white;
          .typeTag {
            transform: scale(0.8);
          }
        }
        img {
          width: 100%;
        }
      }
      .itemInfo {
        width: 0.5rem;
        flex: 1;
        height: 4.5rem;
        padding: 0.1rem 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .itemName {
          width: 100%;
          overflow: hidden;
          font-size: 0.7rem;
          height: 1rem;
          line-height: 1rem;
          white-space: nowrap;
          font-weight: bold;
          text-overflow: ellipsis;
          color: #333;
        }
        .itemTag {
          height: 1rem;
          line-height: 1rem;
          font-size: 0.6rem;
          color: #666;
          margin-top: 0.25rem;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .tagDes {
            background-color: #4fc763;
            color: #fff;
            font-size: 0.6rem;
            padding: 0 0.25rem;
            line-height: 1rem;
            border-radius: 0.1rem;
            box-sizing: border-box;
            display: flex;
            .iconfont {
              font-size: 0.6rem;
              margin-right: 0.25rem;
            }
          }
          .saleCont {
            span {
              margin-left: 0.25rem;
            }
          }
        }
        .itemDes {
          height: 1rem;
          line-height: 1rem;
          font-size: 0.6rem;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          // margin-top: 0.2rem;
        }
        .itemTagCont {
          width: 100%;
          height: 1.2rem;
          overflow: hidden;
          display: flex;
          // margin-top: 0.2rem;
          flex-wrap: wrap;
          .tags {
            font-size: 0.6rem;
            padding: 0.1rem 0.25rem;
            box-sizing: border-box;
            border-radius: 0.15rem;
            margin-right: 0.25rem;
            margin-bottom: 0.25rem;
            color: #4fc763;
            border: 1px solid #4fc763;
          }
        }
        .priceVal {
          width: 100%;
          // margin-top: 0.2rem;
          font-size: 0.6rem;
          display: flex;
          display: table-cell;
          .price {
            color: #4fc763;
          }
          .oldPrice {
            color: #666;
            text-decoration: line-through;
          }
        }
      }
    }
    .no_border {
      border-bottom: none;
    }
  }
}
</style>
